<template>
    <div class="swiper-demo">
        <div class="swiper-container coustom-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="height: 100%" v-for="(item, index) in swiperData" :key="index">
                    <div class="picture_container">
                        <img class="swiper-img" :src="item.pic" @click="clickImge(item)" />
                    </div>
                    <p class="swiper-des">{{ item.title }}</p>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css'; // 注意这里的引入

export default {
    name: 'swiperCustome',
    props: {
        swiperData: Array,
    },
    data() {
        return {
            swiper: null,
            show: false,
        };
    },
    
    mounted() {
     
        if(!this.swiperData){
            return
        }
        this.swiper = null;
            this.swiper= new Swiper('.coustom-container', {
                autoplay: {
                    delay: 1000,
                    disableOnInteraction: false,
                },
                slidesPerView: 3,
            })
            
   
          
    },
    methods: {
       
        clickImge(data) {
            window.open(data.pic);
        },
    },
    beforeDestroy() {
        this.swiper = null;
    },
};
</script>

<style scoped lang="scss">
.swiper-container {
    width: 700px;
    height: 400px;
    margin: 0 auto;
}

.swiper-slide {
    width: 164px;
    // margin-right: 20px;
    padding-right: 12px;
}

.picture_container {
    border: 1px solid #eeeeee;
    padding-top: 130%;
}

.swiper-des {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 0 15px;
    color: #424242;
}

.swiper-img {
    margin: 10px;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
</style>
